<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="formValidate"
        :model="formValidate"
        label-width="75px"
        label-position="right"
        @submit.native.prevent
        inline
      >
        <el-form-item label="是否显示：" label-for="status">
          <el-select
            v-model="status"
            placeholder="请选择"
            element-id="status"
            clearable
            @change="userSearchs"
          >
            <el-option value="all" label="全部"></el-option>
            <el-option value="1" label="显示"></el-option>
            <el-option value="0" label="不显示"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否推荐：" label-for="isRecommend">
          <el-select
            v-model="isRecommend"
            placeholder="请选择"
            element-id="isRecommend"
            clearable
            @change="userSearchs"
          >
            <el-option value="all" label="全部"></el-option>
            <el-option value="1" label="推荐"></el-option>
            <el-option value="0" label="不推荐"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="搜索" prop="title" label-for="status2">
          <el-input placeholder="请输入分类" v-model="formValidate.keyword">
            <el-button slot="append" @click="userSearchs" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-row type="flex">
          <el-col v-bind="grid">
            <el-button type="primary" icon="md-add" @click="add(0)">添加分类</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-divider dashed />
      <el-table
        highlight-hover-row
        :loading="loading"
        header-row-class-name="false"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :data="categoryList"
      >
        <el-table-column label="ID" tooltip width="80">
          <template slot-scope="{row ,index}">{{row.id}}</template>
        </el-table-column>
        <el-table-column tree-node label="分类名" min-width="130">
          <template slot-scope="{row, index}">{{row.title}}</template>
        </el-table-column>
        <el-table-column label="封面图" min-width="130">
          <template slot-scope="{ row }">
            <div class="tabBox_img" v-if="row.thumb">
              <img v-lazy="row.thumb" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="显示/隐藏" min-width="120">
          <template slot-scope="{row, index}">
            <el-switch
              v-model="row.status"
              :value="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="onchangeIsShow(row)"
              size="large"
              active-text="显示"
              inactive-text="隐藏"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" min-width="120">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isRecommend"
              :value="row.isRecommend"
              :active-value="1"
              :inactive-value="0"
              @change="onchangeIsRecommend(row)"
              size="large"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250" fixed="right">
          <template slot-scope="{ row }">
            <a v-if="!row.pid" @click="add(row.id)">添加子类</a>
            <el-divider direction="vertical" />
            <a v-if="row.pid" @click="edit(row,row.pid)">编辑子类</a>
            <a v-if="!row.pid" @click="edit(row,0)">编辑</a>
            <el-divider direction="vertical" />
            <a @click="del(row, '删除分类')">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          :current-page="formValidate.page"
          show-elevator
          show-total
          @current-change="pageChange"
          :page-size="formValidate.limit"
        />
      </div>
    </el-card>
    <el-dialog :visible.sync="modals" :title="table.title" width="75%" foothide @close="cancel">
      <editForm
        ref="cateForm"
        v-if="modals"
        :id="table.id"
        :pid="table.pid"
        @close="cancel"
        @submitSuccess="submitSuccess"
      ></editForm>
    </el-dialog>
  </div>
</template>
  <script>
import { getServiceCateListApi, cateStatusApi, CateIsRecomApi, delCateInfoApi } from '@/api/onsite';
import editForm from './handle/editForm';
export default {
  name: 'serviceCate',
  components: {
    editForm,
  },
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      loading: false,
      table: {
        id: 0,
        pid: 0,
        title: '编辑分类',
      },
      formValidate: {
        keyword: '',
        status: '',
        isRecommend: '',
        page: 1,
        limit: 10,
      },
      status: '',
      isRecommend: '',
      total: 0,
      columns1: [],
      FromData: null,
      modalTitleSs: '',
      categoryId: 0,
      categoryList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 添加
    add(pid) {
        if(pid > 0){
            this.table.title = '添加子类分类';
        }
        else{
            this.table.title = '添加分类'
        }
        this.table.pid = pid
        this.modals = true;
    },
    // 编辑
    edit(row,pid) {
        if(pid > 0){
            this.table.title = '编辑子类分类';
        }
        else{
            this.table.title = '编辑分类';
        }
        this.table.pid = pid;
        this.table.id = row.id;
        this.modals = true;
    },
    cancel() {
      this.table = {
        id: 0,
        pid: 0,
        title: '编辑分类',
      };
      this.modals = false;
    },
    submitSuccess(){
        this.getList();
        this.cancel();
    },
    // 删除
    del(row, tit) {
      this.$modalSure(`删除【${row.title}】`).then(() => {
        delCateInfoApi(row.id)
          .then((res) => {
            this.$message.success('删除成功');
            this.getList();
          })
          .catch((res) => {
            this.$message.error('删除失败');
          });
      });
    },
    // 列表
    getList() {
      this.loading = true;
      this.formValidate.status = this.status === 'all' ? '' : this.status;
      this.formValidate.isRecommend = this.isRecommend === 'all' ? '' : this.isRecommend;
      getServiceCateListApi(this.formValidate)
        .then(async (res) => {
          let data = res;
          this.categoryList = data.list;
          this.total = data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.formValidate.page = index;
      this.getList();
    },
    // 表格搜索
    userSearchs() {
      this.formValidate.page = 1;
      this.getList();
    },
    // 修改是否显示
    onchangeIsShow(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      cateStatusApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    // 修改是否推荐
    onchangeIsRecommend(row) {
      let data = {
        id: row.id,
        isRecommend: row.isRecommend,
      };
      CateIsRecomApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
  